<template>
  <div>
    <div class="header_top">
      <div class="mark_head">
        <span class="ant-card-head">私域直播数据看板</span>
        <span class="time">更新时间：{{sceen.time}}</span>
        <!-- <el-button @click="init()" style="float: right; padding: 3px 0" type="text">
          <i class="el-icon-refresh-right"></i> 刷新
        </el-button> -->
        <span style="float: right; padding: 3px 0;color: red;">{{state}}</span>
      </div>
    </div>
    <div class="screen_data">
      <el-row :gutter="15">
        <el-col :span="9">
            <div class="card_content">
              <div class="card_jine_content">
                <div class="t_contne">
                  <span class="t1">销售额（元）</span>
                  <span class="t2">GMV</span>
                </div>

                <div class="img_content">
                  <img src="@/assets/img/asc.png" class="card_img">
                </div>
                
              </div>
              
              <div class="t_contne2">
                  <span class="t3">总销售额：¥</span>
                  &numsp;
                  <span class="t4">{{sceen.zong_xiaoshoue }}</span>
              </div>
          </div>
          
        </el-col>
        <el-col :span="5">
          <el-card class="flex-column item-box" shadow="hover">
            <img src="@/assets/img/zhl.png">
            <div class="flex flex-column-center">
              <span class="t1">点击转化率</span>
            </div>
            <span class="t2">{{sceen.dianji_zhuanhualv}}</span>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card class="flex-column item-box" shadow="hover">
            <img src="@/assets/img/gkrs.png">
            <div class="flex flex-column-center">
              <span class="t1">累计观看人数</span>
            </div>
            <span class="t2">{{sceen.guankan_renshu}}</span>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card class="flex-column item-box" shadow="hover">
            <img src="@/assets/img/zbsc.png">
            <div class="flex flex-column-center">
              <span class="t1">本场累计直播时长</span>
            </div>
            <span class="t2">{{sceen.zhibo_shichang}}</span>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="4">
          <div class="ant-statistic-title">下单人数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.xiadan_reshu }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">未支付人数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{sceen.weifukuan_renshu}}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">退款人数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.tuikuan_renshu }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">点击商品人数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.dianji_shangpin_renshu }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">平均观看时长</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.pingjun_guankan_shichang }}</span>
          </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="4">
          <div class="ant-statistic-title">下单单数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.xiadan_danshu }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">未支付单数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.weizhifu_danshu }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">退款单数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.tuikuan_danshu }}</span>
          </span>
          </div>
        </el-col>
        
        <el-col :span="5">
          <div class="ant-statistic-title">点击商品次数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.dianji_shangpin_cishu }}</span>
          </span>
          </div>
        </el-col>
        
        <el-col :span="5">
	    <div class="ant-statistic-title">互动率</div>
            <div class="ant-statistic-content" style="font-weight: 700;">
                <span class="ant-statistic-content-value">
                    <span class="ant-statistic-content-value-int">{{ sceen.interaction_lv }}</span>
                </span>
            </div>
        </el-col>
       
      </el-row>
      <el-row :gutter="15">
        <el-col :span="4">
          <div class="ant-statistic-title">邀约数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.yaoyue }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="ant-statistic-title">到课数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.daoke }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="ant-statistic-title">邀约到课率</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.daokelv }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="ant-statistic-title">成交数</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.chengjiao }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="ant-statistic-title">到课成交率</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.chengjiaolv }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="ant-statistic-title">邀约成交率</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ sceen.yaoyuelv }}</span>
          </span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div style="width:500px;overflow:auto"> -->
      <div id="main" ref="main" style="width: 100%; height: 450px; background: #fff;"></div>
    <!-- </div> -->
  </div>
</template>

<script>

import {
  shujukanban,
  realStatistics
} from '@/api/live/screen';
import * as echarts from 'echarts';
  let _self;
  export default {

    components: {},
    data() {
      return {
        state:'',
        liveId:this.$route.query.liveId,
        loading: false,
        imgnum: 1, //选择图片数量
        sceen:{
          time:'',
          zong_xiaoshoue:0,
          tuikuan_xiaoshoue:0,
          weizhifu_xiaoshoue:0,
          dianji_zhuanhualv:'0.00%',
          guankan_renshu:0,
          zhibo_shichang:0,
          xiadan_reshu:0,
          weifukuan_renshu:0,
          tuikuan_renshu:0,
          dianji_shangpin_renshu:0,
          dianji_shangpin_cishu:0,
          pingjun_guankan_shichang:0,
          xiadan_danshu:0,
          tuikuan_danshu:0,
          weizhifu_danshu:0,
          yaoyue:0,
          daoke:0,
          chengjiao:0,
          daokelv:'0.00%',
          chengjiaolv:'0.00%',
          yaoyuelv:'0.00%',
          options:[],
          optionsData:[],
          inData: [],
          outData: [],
          max:10,
          splitNumber:10,
          dataZoomStart:0,
          dataZoomEnd:1,
        }
      }
    },
    created() {
      _self = this;
      _self.init(); 
    },
    methods: {
      init: () => {
        var a = 1;
        _self.executeEverySecond(a);
        _self.executeEvery();
      },
      executeEverySecond(a) {
          console.log('这段代码每隔一秒执行一次'+a++);
          var intervalId = setInterval(() => {
            this.getshujukanban(intervalId); 
          }, 1000);
      },
      //定时器
      executeEvery() {
        this.drawLine();
        console.log('这段代码每隔一分钟执行一次');
        var realStatisticsId = setInterval(() => {
          this.drawLine(realStatisticsId);
        }, 60*1000);
      },
      getshujukanban(intervalId){
        let _param = {'liveId':this.liveId};
        shujukanban(_param).then((res)=>{
          console.log('screen:'+res.data );
          this.sceen = res.data;
          // this.drawLine();
          if(res.data.state == 2){
            // 稍后移除定时器
            clearInterval(intervalId);
            console.log('直播结束了哦！');
            alert('直播结束了哦！');
            this.state='直播结束了哦！';
          }else if(res.data.state == 1){
            this.state='直播中。。。';
          }else{
            this.state='直播尚未开始！';
          }
        });
      },
      async drawLine(realStatisticsId) {
            let _param = {'liveId':this.liveId};
          await  realStatistics(_param).then((res)=>{
                console.log('screen:'+res.data );
                this.sceen.options = res.data.options;
                this.sceen.optionsData = res.data.optionsData;
                this.sceen.inData = res.data.inData;
                this.sceen.outData = res.data.outData;
                this.sceen.dataZoomStart = res.data.dataZoomStart;
                this.sceen.dataZoomEnd = res.data.dataZoomEnd;
                this.sceen.max = res.data.max;
                this.sceen.splitNumber = res.data.splitNumber;
              if(res.data.state == 2){
                  // 稍后移除定时器
                  clearInterval(realStatisticsId);
                  console.log('直播结束移除定时器！');
              }
            });
            // 初始化折线图
            this.charts = echarts.init(this.$refs['main']);
             // 设置折线图数据和样式
            // this.charts.setOption({
            //     title: {
            //         left: "3%",
            //         top: "5%",
            //         text: "直播实时在线人数", // 自定义
            //     },
            //     legend: {
            //             data: ['温度展示']
            //         },
            //     tooltip: {
            //         trigger: "axis",
            //     },
            //     grid: {
            //         top: "30%",
            //         left: "5%",
            //         right: "5%",
            //         bottom: "5%",
            //         containLabel: true,
            //     },

            //     toolbox: {
            //         feature: {
            //             saveAsImage: {},
            //         },
            //     },

            //     // 自定义：设置x轴刻度
            //     xAxis: {
            //         type: "category",
            //         boundaryGap: true,
            //         data: this.sceen.realX,
            //     },

            //     // 自定义：设置y轴刻度
            //     yAxis: {
            //         type: "value",
            //     },

            //     // 设置数据
            //     series: [
            //         {
            //             name: "在线人数", // 自定义
            //             type: "line",
            //             stack: "测试", // 自定义
            //             data:  this.sceen.realY, // 自定义
            //             areaStyle: {
            //                 color: {
            //                     type: "linear",
            //                     x: 0,
            //                     y: 0,
            //                     x2: 0,
            //                     y2: 1,
            //                     colorStops: [
            //                         {
            //                             offset: 0,
            //                             color: "rgb(255,200,213)",
            //                         },
            //                         {
            //                             offset: 1,
            //                             color: "#ffffff",
            //                         },
            //                     ],
            //                     global: false,
            //                 },
            //             },
            //             itemStyle: {
            //                 color: "rgb(255,96,64)",
            //                 lineStyle: {
            //                     color: "rgb(255,96,64)",
            //                 },
            //             },
            //         },
            //     ],
            // });
            this.charts.setOption({
                    title:{
                      text:'直播在线人数数据统计',
                      left:'0.5%'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['直播在线人数', '直播间进入人数', '直播间离开人数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
 
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.sceen.options,
                        name:'(时间)',
                        axisLabel: {
                          interval: 0,// 显示所有标签，如果想要设置特定间隔，可以设置为大于0的数字
                          rotate: 45,
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '(人)',
                        max:this.sceen.max?this.sceen.max:10,
                        min:0,
                        splitNumber:this.sceen.splitNumber?this.sceen.splitNumber:10,
                    },
 
                    series: [
		        {
                            name: '直播在线人数',
                            type: 'line',
                            stack: '总量',
                            data: this.sceen.optionsData
                        },
                        {
                            name: '直播间进入人数',
                            type: 'line',
                            stack: '人数',
                            data: this.sceen.inData,
                        },
                        {
                            name: '直播间离开人数',
                            type: 'line',
                            stack: '人数',
                            data: this.sceen.outData,
                        }
		    ],
                    dataZoom:[{
                      show: false,
                      type: "slider",
                      // width: "100%",
                      start:this.sceen.dataZoomStart,
                      end:this.sceen.dataZoomEnd
                    },
                    {
                    // 没有下面这块的话，只能拖动滚动条，
                    // 鼠标滚轮在区域内不能控制外部滚动条
                    type: "inside",
                    // 滚轮是否触发缩放
                    zoomOnMouseWheel: false,
                    // 鼠标滚轮触发滚动
                    moveOnMouseMove: true,
                    moveOnMouseWheel: true,
                  },
                  ]
                });
        },
      
    },


  }


</script>

<style lang="scss" scoped>
/*@import "@/assets/css/common";*/
  .el-row {
      padding: 10px;

      &:last-child {
          margin-bottom: 0;
      }
  }

  .el-col {
    border-radius: 4px;
  }
  .el-card__body {
    padding: 0;
  }
  body {
    margin: 0;
    color: rgba(0, 0, 0, 0.65);
  }
  .screen_data {
    padding: 0 10px;
    margin: 10px 0;
  }
  .header_top {
    padding: 15px;
    //background-color: #ecf5ff;
    //border-color: #d9ecff;
    //color: #409EFF;
    font-size: 14px;
    border-bottom: 1px #cccccc solid;
  }
  .mark_head {
    position: relative;
    padding-left: 12px;
    border-left: 4px #e6533c solid;
  }
  .gmv-box {
    color: #fff;
    padding: 12px;
    height: 169px;
    border-radius: 8px;
    /* position: relative; */
    background: linear-gradient(90deg,#e6533c 3.92%,#eb7151 90.3%);
    box-sizing: border-box;
    img {
      width: 146px;
      height: 66px;
      position: absolute;
      right: 12px;
      top: 12px;
    }
    .flex-column {
      -webkit-box-orient: vertical;
      -ms-flex-direction: column;
      flex-direction: column;
      display: flex;
      -webkit-box-direction: normal;
    }
    .flex-line {
      box-sizing: border-box;
      line-height: 2.5;
    }
    .t1 {
      font-size: 14px;
      font-weight: 400;
    }
    .t2 {
      font-size: 24px;
      font-weight: 900;
    }
    .t3 {
      color: #f5f5f5;
      font-size: 32px;
      font-weight: 700;
    }
    .t4 {
      color: #f5f5f5;
      font-size: 46px;
      font-weight: 700;
      font-family: D-DIN;
    }
  }
  .item-box {
    border-radius: 8px;
    padding: 20px 16px;
    border: 1px solid rgba(0,0,0,.06);
    height: 170px;
    color: #333;
    background: #fcfcfc;
    box-sizing: border-box;
    img {
      width: 42px;
      height: 42px;
      display: block;
    }
    .flex-column-center {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -ms-flex-direction: row;
      flex-direction: row;
    }
    .t1 {
      font-size: 13px;
      font-weight: 500;
      margin: 12px 0;
    }
    .t2 {
      font-size: 22px;
      font-weight: 700;
    }
  }
  .flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .ant-statistic-title {
    margin-bottom: 4px;
    color: rgba(0,0,0,.45);
    font-size: 14px;
  }
  .ant-statistic-content {
    color: rgba(0,0,0,.85);
    font-size: 24px;
    line-height: 1.5;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

  }
  .ant-statistic-content-suffix {
    margin-left: 4px;
    font-size: 16px;
  }
  .ant-card-head {
    color: rgba(0,0,0,.85);
    font-weight: 500;
    font-size: 16px;
  }
  .time {
    color: #999;
    font-size: 12px;
    margin-left: 20px;
  }

  .card_content{
    display: flex;
    flex-direction: column;
    flex: content;
    height: 200px;
    color: #fff;
    padding: 12px;
    height: 169px;
    border-radius: 8px;
    /* position: relative; */
    background: linear-gradient(90deg,#e6533c 3.92%,#eb7151 90.3%);
    box-sizing: border-box;
  }

  .card_img{
    width: 250px;
    height: 80px;
    justify-content: right;
    display: flex;
  }

  .img_content{
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
   
  .card_jine_content{
    display: flex;
    justify-content: space-between;
    height:100px;
    width: 100%;
    font-size: large;
    font-weight: bold;
  }

  .t_contne{
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: large;
    font-weight: bold;
    margin-top: 10px;
  }
  .t_contne2{
    display: flex;
    width: 100%;
    font-size: 25pt;
    font-weight: bold;
  }
</style>
